<template>
	<view class="ask">
		<view class="top">
			<view class="left">
				<el-switch v-model="value" active-color="rgb(143,195,31)" inactive-color="rgb(162,162,162)" />
				<text v-if="value">公开</text>
				<text v-else>私密</text>
			</view>
			<text>提问须知</text>
		</view>
		<el-input type="textarea" v-model="textarea" placeholder="提问可选公开或私密，公开提问的回答每被偷听一次，你分成 ¥0.5元" maxlength=80
			:show-word-limit='true' size='medium' :autosize='{ minRows: 2, maxRows: 5 }'>
		</el-input>
		<view class="btnBox">
			<el-button type="success" @click="release">¥8.88元提问</el-button>
		</view>
		<!-- 跳转 支付 遮罩层 -->
		<el-dialog title="提示" :visible.sync="dialogVisible" :before-close="handleClose" :close-on-click-modal='false'
			:close-on-press-escape='false'>
			<text @click="payment">确认支付8.88元</text>
			<view class="bottom" @click="dialogVisible = false">取消</view>
		</el-dialog>
		<el-dialog :visible.sync="dialogVisible2" :before-close="handleClose" :close-on-click-modal='false'
			:close-on-press-escape='false' class='neiZzc'>
			支付成功、请您耐心等待回答
		</el-dialog>
	</view>
</template>

<script>
	import textarea from 'uview-ui/libs/config/props/textarea';
	export default {
		props: ['doctorData'],
		data() {
			return {
				value: true,
				textarea: '',
				dialogVisible: false,
				dialogVisible2: false
			};
		},
		methods: {
			// 遮罩层自带事件
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			// 支付按钮
			release() {
				if (this.textarea !== '') {
					this.dialogVisible = true
				} else {
					uni.showToast({
						title: '请您正确填写想要咨询的问题',
						duration: 2000,
						icon: 'none'
					});
				}
			},
			// 支付成功
			payment() {
				this.$api.postMjtSpeak({
					speakHeadImg: 'http://127.0.0.1:7001/public/top.jpg',
					speakName: '我',
					speakContent: this.textarea,
					speakTime: new Date().getTime(),
					speakIcon1: 0,
					speakIcon2: 0,
					doctorHeadImg: this.doctorData.doctorHeadImg,
					uid: this.doctorData.id,
					isOpen: this.value ? '1' : '0',
				}).then(res => {
					// console.log(res)
					if (res.code == 200) {
						// 告诉父组件，从新获取一下列表
						this.$emit('sonData')
						this.dialogVisible = false
						this.dialogVisible2 = true
						setTimeout(() => {
							this.dialogVisible2 = false
							this.value = true
							this.textarea = ''
						}, 2000)
					}
				})
			},
		},
	}
</script>

<style lang="less">
	.ask {
		box-sizing: border-box;
		padding: 0 40upx;
		height: 25vh;
		font-size: 30upx;
		color: grey;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;

		.top {
			display: flex;
			justify-content: space-between;

			.left {
				text {
					margin-left: 20upx;
				}
			}
		}

		.btnBox {
			display: flex;
			justify-content: flex-end;

			.el-button--success {
				width: 30%;
				padding: 15upx 10upx;
				font-size: 24upx;
				background-color: rgb(143, 195, 31);
			}
		}
	}

	::v-deep .el-dialog {
		width: 70%;
		height: 15vh;
		margin-top: 35vh !important;
		border-radius: 24upx;
		overflow: hidden;
	}

	::v-deep .el-dialog__header,
	.el-dialog__footer {
		display: none;
	}

	::v-deep .el-dialog__body {
		height: 100%;
		padding: 0;
		display: flex;
		flex-direction: column;

		text {
			display: block;
			height: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 40upx;
			text-align: center;
			border-bottom: 2upx solid rgba(203, 203, 203, 0.5);
		}

		.bottom {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 36upx;
		}

	}

	.neiZzc ::v-deep .el-dialog__body {
		height: 100%;
		padding: 0;
		font-size: 32upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 30upx;
		color: rgb(114, 156, 25);
	}
</style>
